<template>
  <div>
    <el-header class="primaryColor" style="height: 80px">
      <!-- 左侧 -->
      <div class="headLeft">
        <!-- 开关 -->
        <div class="iconFont">
          <i
            class="el-icon-s-fold"
            v-show="!$store.state.isCollapse"
            @click="$store.state.isCollapse = !$store.state.isCollapse"
          ></i>
          <i
            class="el-icon-s-unfold"
            v-show="$store.state.isCollapse"
            @click="$store.state.isCollapse = !$store.state.isCollapse"
          ></i>
        </div>
        <!-- 改变颜色 -->
        <div class="change">
          <el-color-picker
            size="mini"
            @change="colorChange"
            v-model="colors.primary"
          ></el-color-picker>
        </div>
        <!-- 标题 -->
        <div>后台管理系统</div>
      </div>
      <!-- 右侧 -->
      <div class="headRight">
        <!-- 图标 -->
        <div class="RightIcon">
          <i class="el-icon-rank" @click="toggleFullscreen"></i>
          <i class="el-icon-bell"></i>
          <img src="../../../../public/QQ图片20201007203424.jpg" alt="" />
        </div>
        <!-- 退出接口 -->
        <div class="select">
          <!-- <pre>{{this.user.username}}</pre> -->
          <el-dropdown trigger="click">
            <!-- 用户 -->
            <span class="el-dropdown-link">
              <span v-for='item in list' :key='item.id'>{{ item.username }}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <!-- 退出 -->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <span @click="out">退出</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-header>
  </div>
</template>
<script>
import generateColors from "@/utlis/color";
import objectAssign from "object-assign";
export default {
  name: "App",
  data() {
    return {
      originalStylesheetCount: -1, //记录当前已引入style数量
      originalStyle: "", //获取拿到的.css的字符串
      colors: {
        //颜色选择器默认颜色值,这个值要和element-variables一样
        primary: "#409EFF",
      },
      // primaryColor: "", //提交成功后设置默认颜色
      cssUrl: [
        "//unpkg.com/element-ui/lib/theme-chalk/index.css",
        "./static/css/index.css",
      ],
      flag: 0,
      user: [],
      list:[],
    };
  },
  methods: {
    colorChange(e) {
      if (!e) return;
      localStorage.setItem("color", e);
      this.primaryColor = this.colors.primary;
      this.colors = objectAssign(
        {},
        this.colors,
        generateColors(this.colors.primary)
      );
      this.writeNewStyle();
    },
    writeNewStyle() {
      let cssText = this.originalStyle;
      Object.keys(this.colors).forEach((key) => {
        cssText = cssText.replace(
          new RegExp("(:|\\s+)" + key, "g"),
          "$1" + this.colors[key]
        );
      });
      if (this.originalStylesheetCount === document.styleSheets.length) {
        // 如果之前没有插入就插入
        const style = document.createElement("style");
        style.innerText =
          ".primaryColor{background-color:" +
          this.colors.primary +
          "}" +
          cssText;
        document.head.appendChild(style);
      } else {
        // 如果之前没有插入就修改
        document.head.lastChild.innerText =
          ".primaryColor{background-color:" +
          this.colors.primary +
          "} " +
          cssText;
      }
    },
    getIndexStyle(url) {
      let that = this;
      var request = new XMLHttpRequest();
      request.open("GET", url);
      request.onreadystatechange = function () {
        if (
          request.readyState === 4 &&
          (request.status == 200 || request.status == 304)
        ) {
          // 调用本地的如果拿不到会得到html,html是不行的
          if (request.response && !/DOCTYPE/gi.test(request.response)) {
            that.originalStyle = that.getStyleTemplate(request.response);
            that.writeNewStyle();
          } else {
            that.originalStyle = "";
          }
        } else {
          that.originalStyle = "";
        }
      };
      request.send(null);
    },
    getStyleTemplate(data) {
      const colorMap = {
        "#3a8ee6": "shade-1",
        "#409eff": "primary",
        "#53a8ff": "light-1",
        "#66b1ff": "light-2",
        "#79bbff": "light-3",
        "#8cc5ff": "light-4",
        "#a0cfff": "light-5",
        "#b3d8ff": "light-6",
        "#c6e2ff": "light-7",
        "#d9ecff": "light-8",
        "#ecf5ff": "light-9",
      };
      Object.keys(colorMap).forEach((key) => {
        const value = colorMap[key];
        data = data.replace(new RegExp(key, "ig"), value);
      });
      return data;
    },
    // 点击按钮触发的方法
    toggleFullscreen() {
      this.flag++;
      this.flag % 2 == 0
        ? this.outFullCreeen(document)
        : this.FullCreeen(document.documentElement);
    },
    // 进入全屏的方法
    FullCreeen(element) {
      let el = element;
      let rfs =
        el.requestFullScreen ||
        el.webkitRequestFullScreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullScreen;
      // Element.requestFullscreen() 此方法用于发出异步请求使元素进入全屏模式。
      // 调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，
      // document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件。
      if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
      } else if (typeof window.ActiveXObject != "undefined") {
        let wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }
    }, //退出全屏的方法
    outFullCreeen(element) {
      let el = element;
      let cfs =
        el.cancelFullScreen ||
        el.webkitCancelFullScreen ||
        el.mozCancelFullScreen ||
        el.exitFullScreen;
      if (typeof cfs != "undefined" && cfs) {
        cfs.call(el);
      } else if (typeof window.ActiveXObject != "undefined") {
        let wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }
    },
    out() {
      // console.log(111);
      this.$router.push("/");
    },
  },
  mounted() {
    // 默认从线上官方拉取最新css,2秒钟后做一个检查没有拉到就从本地在拉下
    let that = this;
    // 如果是记住用户的状态就需要，在主题切换的时候记录颜色值，在下次打开的时候从新赋值
    this.colors.primary = localStorage.getItem("color") || this.colors.primary; //例如
    this.getIndexStyle(this.cssUrl[0]);
    setTimeout(function () {
      if (that.originalStyle) {
        return;
      } else {
        that.getIndexStyle(that.cssUrl[1]);
      }
    }, 2000);
    this.$nextTick(() => {
      // 获取页面一共引入了多少个style 文件
      this.originalStylesheetCount = document.styleSheets.length;
    });
    // 获取管理员权限
    this.user = JSON.parse(localStorage.getItem("user"));
    this.user.forEach((item) => {
      if ("admin" === item.username) {
        this.list.push(item);
      }
    });
  },
};
</script>
<style lang='scss' scope>
@import "@/assets/element-variables.scss";
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
// 左侧
.headLeft {
  // width: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
// 图标
.iconFont {
  font-size: 40px;
  color: #fff;
}
// 开关
.change {
  margin: 0 20px;
}
// 右侧
.headRight {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.RightIcon {
  font-size: 30px;
  color: #fff;
  display: flex;
  align-items: center;
}
.RightIcon > i {
  margin: 0 10px;
}
img {
  width: 50px;
  border-radius: 50%;
  margin: 0 10px;
}
.select {
  color: #fff;
  font-size: 20px;
}
</style>